<template>
  <xoFormItem :label="props.label" :tips="props.tips" :ruleMessage="props.ruleMessage">
    <template #header>
      <slot name="header"></slot>
    </template>
    <picker class="w-full" :mode="props.mode" :start="props.start" :end="props.end" :placeholder="props.placeholder"
      @change="handleChange">
      <div class="form-item-inline">
        <div class="grow" :class="model ? 'font-bold' : 'desc'">{{ model ? model : '请选择时间' }}</div>
        <div class="arrow-down"></div>
      </div>
    </picker>
    <template #footer>
      <slot name="footer"></slot>
    </template>
  </xoFormItem>
</template>

<script setup lang='ts'>
import { ref } from 'vue';
import xoFormItem from './xoFormItem.vue';

interface IProps {
  mode?: 'date' | 'time',
  label?: string,
  tips?: string,
  placeholder?: string,
  ruleMessage?: string,
  start?: string,
  end?: string,
}

const props = withDefaults(defineProps<IProps>(), {
  mode: 'date',
  label: '',
  tips: '',
  placeholder: '',
  ruleMessage: '',
})

const model = defineModel<string>()

const emit = defineEmits(['onChange'])

const handleChange = (e: any) => {
  console.log(e.detail.value);
  model.value = e.detail.value
  emit('onChange', Number(e.detail.value))
}


</script>

<style></style>